<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格转换器saruri</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        @media screen and (max-width:600px) {
            .td {
                margin-top: 1em;
            }

            .td2 {
                margin-bottom: 1em;
            }

            .td textarea {
                width: 20rem;
            }
            .cut{margin-top: 10px; margin-left: 0;}
        }

        .layui-textarea {
            min-height: 600px;
        }

        #sql {
            font-size: xx-small; background-color: #000; color: #f1f1f1;
        }
    </style>
</head>

<body>

    <blockquote class="layui-elem-quote layui-text">
        转换word表格为 layui 表格  ”：1. <a href="https://gitee.com/saruri/tab"
            target="_blank">码云</a> 2. <a href="https://gitee.com/saruri/tab/issues"
            target="_blank">新需求issues 来这里提？</a>
    </blockquote>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>转换word表格为 layui 表格</legend>
    </fieldset>

    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">类型选择</label>
            <div class="layui-input-block">
                <input type="radio" class="type" name="type" value="layui" title="layui表格" >
                <input type="radio" class="type" name="type" value="json" title="json" >
                <input type="radio" class="type" name="type" value="tab" title="纯表格"  >
                <input type="radio" class="type" name="type" value="tab_input" title="表格+文本框" checked="checked" >
            </div>
        </div>
        <div class="layui-col-md4 layui-form-text td">
            <label class="layui-form-label">word表格</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容markdown格式" name="md" id="md" class="layui-textarea"
                    style="margin-right:2em;">已经构造基础表格样式,已经构造了tr,已经构造了td个人简历您是从何处了解到我们的招聘信息（必填）：58同城百度路过其它: <table class="MsoTableGrid layui-table" border="1" cellspacing="0"><tr><td width="89" valign="center">姓 名</td><td width="125" valign="center" colspan="5"></td><td width="75" valign="center">性 别</td><td width="128" valign="center" colspan="3"></td><td width="109" valign="center" colspan="2">出生年月</td><td width="122" valign="center"></td></tr><tr><td width="89" valign="center">籍 贯</td><td width="125" valign="center" colspan="5"></td><td width="75" valign="center">证件号码</td><td width="128" valign="center" colspan="3"></td><td width="109" valign="center" colspan="2">婚姻状况</td><td width="122" valign="center"></td></tr><tr><td width="89" valign="center">应聘岗位</td><td width="125" valign="center" colspan="5"></td><td width="75" valign="center">期望月薪</td><td width="128" valign="center" colspan="3"></td><td width="109" valign="center" colspan="2">是否随时入职</td><td width="122" valign="center"></td></tr><tr><td width="89" valign="center">联系电话</td><td width="125" valign="center" colspan="5"></td><td width="75" valign="center">微信号</td><td width="128" valign="center" colspan="3"></td><td width="109" valign="center" colspan="2">何时可入职</td><td width="122" valign="center"></td></tr><tr><td width="89" valign="center">详细住址</td><td width="559" valign="center" colspan="12"></td></tr><tr><td width="648" valign="center" colspan="13">学习经历（近期）</td></tr><tr><td width="89" valign="center">学习时间</td><td width="249" valign="center" colspan="7">毕业院校</td><td width="188" valign="center" colspan="4">最高学历</td><td width="122" valign="center">专业</td></tr><tr><td width="89" valign="center"></td><td width="249" valign="center" colspan="7"></td><td width="188" valign="center" colspan="4"></td><td width="122" valign="center"></td></tr><tr><td width="648" valign="center" colspan="13">工作经历（由近至远填写）</td></tr><tr><td width="89" valign="center">任职时间</td><td width="249" valign="center" colspan="7">工作单位</td><td width="79" valign="center" colspan="2">职务</td><td width="109" valign="center" colspan="2">工资待遇</td><td width="122" valign="center">离职原因</td></tr><tr><td width="89" valign="center"></td><td width="249" valign="center" colspan="7"></td><td width="79" valign="center" colspan="2"></td><td width="109" valign="center" colspan="2"></td><td width="122" valign="center"></td></tr><tr><td width="89" valign="center"></td><td width="249" valign="center" colspan="7"></td><td width="79" valign="center" colspan="2"></td><td width="109" valign="center" colspan="2"></td><td width="122" valign="center"></td></tr><tr><td width="89" valign="center"></td><td width="249" valign="center" colspan="7"></td><td width="79" valign="center" colspan="2"></td><td width="109" valign="center" colspan="2"></td><td width="122" valign="center"></td></tr><tr><td width="89" valign="center"></td><td width="249" valign="center" colspan="7"></td><td width="79" valign="center" colspan="2"></td><td width="109" valign="center" colspan="2"></td><td width="122" valign="center"></td></tr><tr><td width="648" valign="top" colspan="13">出来工作是为了生存、成长还是成就，为什么？</td></tr><tr><td width="648" valign="center" colspan="13">紧急情况联络人</td></tr><tr><td width="108" valign="center" colspan="3">姓名</td><td width="75" valign="center">关系</td><td width="253" valign="center" colspan="7">联系地址</td><td width="212" valign="center" colspan="2">联系电话</td></tr><tr><td width="108" valign="center" colspan="3"></td><td width="75" valign="center"></td><td width="253" valign="center" colspan="7"></td><td width="212" valign="center" colspan="2"></td></tr><tr><td width="648" valign="center" colspan="13">家庭成员（必填）</td></tr><tr><td width="107" valign="center" colspan="2">姓名</td><td width="78" valign="center" colspan="3">关系</td><td width="177" valign="center" colspan="4">联系电话</td><td width="285" valign="center" colspan="4">工作单位及职务</td></tr><tr><td width="107" valign="center" colspan="2"></td><td width="78" valign="center" colspan="3">父亲</td><td width="177" valign="center" colspan="4"></td><td width="285" valign="center" colspan="4"></td></tr><tr><td width="107" valign="center" colspan="2"></td><td width="78" valign="center" colspan="3">母亲</td><td width="177" valign="center" colspan="4"></td><td width="285" valign="center" colspan="4"></td></tr><tr><td width="107" valign="center" colspan="2"></td><td width="78" valign="center" colspan="3">兄弟姐妹</td><td width="177" valign="center" colspan="4"></td><td width="285" valign="center" colspan="4"></td></tr><tr><td width="648" valign="center" colspan="13">聘用意见（由负责面试老师填写）</td></tr><tr><td width="648" valign="center" colspan="13">聘用意见：应聘老师： 应聘时间： 年 月 日</td></tr></table>           </textarea>
            </div>
        </div>
        <div class="layui-col-md8 layui-form-text td td2">
            <label class="layui-form-label">layui表格</label>
            <div class="layui-input-block">
                <textarea placeholder="生成的数据 点击重置内容 可以清除掉演示数据 然后粘贴word表格 立即提交 复制到剪贴板 即可" type="text/plain" name=sql id="sql" class="layui-textarea"></textarea>
            </div>
        </div>


        <div class="layui-form-item" style="padding-top: 10px;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn sql  lay-filter=" demo1">立即提交</button>
                <button type="button" class="layui-btn layui-btn-primary reset">重置内容</button>
                
                <button type="button" style="margin-left: 0;" class="layui-btn layui-btn-primary cut" data-clipboard-action="cut"
                    data-clipboard-target="#sql">复制到剪贴板</button>
            </div>
        </div>

        <div id="demo"></div>

    </form>





    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <!-- <script src="https://cdn.bootcss.com/clipboard.js/2.0.6/clipboard.js"></script> -->
    <script src="/clipboard.js"></script>
    <script>
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , $ = layui.$;
                layedit.build('md' ,{
                tool: []
                }); //建立编辑器

                $('.reset').on('click', function () {
                    //alert(" 复位 监听");

                    $("#demo").html('');
                    $("#sql").val('');
                    layedit.sync('');//清除编辑器
                    md
                    $("#md").val('');
                    layedit.build('md' ,{
                        tool: []
                    });
                    //clipboard.destroy();  //解决多次弹窗
                   // e.clearSelection();
                    form.render();
                });


            $('.sql').on('click', function () {
                var md = $("#md").val();
                //let type = $(".type").val();

                let type = $('input[type^=radio]:checked').val();
                let textarea = form.val("md");

                $("#sql").val('');
                var url = "https://tab.saruri.cn/base.php";
                $.ajax({
                    async: false,
                    type: "Post",
                    url: url,
                    dataType: "json",
                    data: { md: md,type: type },
                    success: function (data) {
                     
                        console.log(data);
                        let str=JSON.stringify(data);
                        if(type=='tab'){
                            //alert(type);
                            $("#sql").val(data);
                            $("#demo").html(data);
                        }
                        if(type=='tab_input'){
                            //alert(type);
                            $("#sql").val(data);
                            $("#demo").html(data);
                        }
                        if(type=='json'){
                            $("#sql").val(str);
                        }
                        if(type=='layui'){
                            $("#sql").val(data);
                            //$(".layui-form").append(data);
                            $("#demo").html(data);
                        }
                        
                        var clipboard = new ClipboardJS('.cut');
                        clipboard.on('success', function (e) {
                            //alert('复制成功');
                            layer.alert('复制成功', {
                            title: '把代码复制到剪贴板'
                            })
                            clipboard.destroy();  //解决多次弹窗
                            e.clearSelection();
                        });

                    }
                });




            });


        });



    </script>

</body>

</html>